<template>
    <div class="body">
        <div class="header">
            <ul>
                <li :class="{active:iccr==1}" @click="change(1)">
                    <span>一级下级</span>
                    <p></p>
                </li>
                <li :class="{active:iccr==2}" @click="change(2)">
                    <span>二级下级</span>
                    <p></p>
                </li>
            </ul>
        </div>

        <img v-if="teamList.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

        <div class="center" ref="box">
            <dl v-for="(item,index) in teamList" :key="index">
                <dd @click="jiantou($event,item.title)" data-info="false">
                    <span>{{item.title}}</span>
                    <div><img src="../../assets/img/gg_icon_down.png" alt="">
                    </div>
                </dd>
                <dt>
                    <table cellpadding="0" cellspacing="0">
                        <thead>
                            <th>用户ID</th>
                            <th>手机</th>
                            <th>会员状态</th>
                            <th>累计收益</th>
                        </thead>
                        <tbody>
                            <tr v-for="(itemr,i) in item.data" :key="i">
                                <td>{{itemr.user_id}}</td>
                                <td>{{itemr.mobile}}</td>
                                <td>{{itemr.grade==0?'普通会员':'会员'}}</td>
                                <td>￥{{itemr.total_money | money}}</td>
                            </tr>
                            <tr class="addmore" @click="getdetial(item.title,parseInt(item.page)+1,item.pageSize)" v-show="Math.ceil(item.total_num/item.pageSize)>item.page"><td colspan="4">加载更多</td></tr>
                        </tbody>
                    </table>
                </dt>
            </dl>
        </div>
    </div>
</template>

<script>
    import {axiosPost} from "../../axios";

    export default {
        name: "",
        data() {
            return {
                iccr: 1,
                teamList:[]
            }
        },
        mounted() {
            this.getTeamdetial();
        },
        methods: {
            jiantou(event,month) {
                let el = event.currentTarget;
                if (el.getAttribute("data-info") == "true") {
                    el.setAttribute("data-info", "false");
                    el.children[1].removeAttribute("class");
                    el.parentElement.children[1].style.display = "none";
                } else {
                    el.setAttribute("data-info", "true");
                    el.children[1].setAttribute("class", "active");
                    el.parentElement.children[1].style.display = "block";
                    this.getdetial(month,1,100);
                }
            },
            getdetial(month,pageNum,pageSize){
                axiosPost('team/team_h_list', {
                    'type': this.iccr,
                    'month':month,
                    'page':pageNum,
                    'pageSize':pageSize
                }, (res) => {
                    if (res.code !== 1) {
                        return
                    }
                    if(parseInt(pageNum)>1){
                        for (let i in this.teamList){
                            if(this.teamList[i].title==month){
                                this.teamList[i].data = this.teamList[i].data.concat(res.data.data);
                                this.teamList[i].page = res.data.page;
                                this.teamList[i].pageSize = parseInt(res.data.pageSize);
                                this.teamList[i].total_num = res.data.total_num;
                            }
                        }
                    }else{
                        for (let i in this.teamList){
                            if(this.teamList[i].title==month){
                                this.teamList[i].data = res.data.data;
                                this.teamList[i].page = res.data.page;
                                this.teamList[i].pageSize = parseInt(res.data.pageSize);
                                this.teamList[i].total_num = res.data.total_num;
                            }
                        }
                    }
                });
            },
            change(iccr) {
                this.iccr = iccr;
                this.getTeamdetial();
                if(this.teamList.length>0){
                    for(let item of this.$refs.box.children){
                        if(item.children[0].getAttribute('data-info')=='true'){
                            item.children[0].setAttribute('data-info','false');
                            item.children[1].style.display = 'none';
                            item.children[0].children[1].removeAttribute("class");
                        }
                    }
                }
            },
            getTeamdetial() {
                axiosPost('team/team_h_month', {
                    'type': this.iccr
                }, (res) => {
                    this.teamList = [];
                    if (res.code !== 1) {
                        return
                    }
                    for (let i of res.data){
                        this.teamList.push({
                            title:i,
                            data:{},
                            page:'',
                            pageSize:'',
                            total_num:0
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/default";

    .addmore{
        text-align: center;
        height: 0.8rem;
        line-height: 0.8rem;
        clear: both;
        width: 100%;

    }

    .header {
        height: 1.2rem;
        background: @color4;

        ul {
            padding: 0 0.4rem;

            .active {
                font-size: 0.4rem;
            }

            .active p {
                display: block;
            }

            .active span {
                display: block;
                margin-top: 0.3rem;
            }

            li {
                float: left;
                font-size: @font32;
                width: 2rem;

                p {
                    width: 0.42rem;
                    height: 0.06rem;
                    background: @color3;
                    margin: 0 auto;
                    display: none;
                }

                span {
                    display: block;
                    text-align: center;
                    font-weight: normal;
                    margin-top: 0.37rem;
                    margin-bottom: 0.1rem;
                }
            }
        }
    }

    .center {
        table {
            width: 100%;
            z-index: 100;

            thead {
                th {
                    font-weight: normal;
                    color: @color2;
                }
            }

            th, td {
                height: 0.8rem;
                font-size: @font28;
                text-align: center;
                color: @color3;
                border-bottom: 1px solid #efefef7a;
            }

            tr {
                td:nth-child(4) {
                    color: @color1;
                }
            }
        }
    }

    .center {
        overflow: hidden;
        background: @color4;

        dl {
            dd {
                height: 0.8rem;
                background: rgba(247, 247, 248, 1);
                padding: 0 0.4rem;
                line-height: 0.8rem;

                span {
                    float: left;
                    font-size: @font32;
                    color: @color2;
                }

                .active {
                    img {
                        transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                        -moz-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                    }
                }

                div {
                    float: left;
                    width: 0.3rem;
                    height: 0.6rem;
                    margin-top: 0.13rem;
                    position: relative;

                    img {
                        width: 0.2rem;
                        height: 0.13rem;
                        display: inline-block;
                        position: absolute;
                        left: 0.05rem;
                        top: 0.235rem;

                        transition: All 0.3s ease-in-out;
                        -webkit-transition: All 0.3s ease-in-out;
                        -moz-transition: All 0.3s ease-in-out;
                        -o-transition: All 0.3s ease-in-out;
                    }
                }

                i {
                    float: right;
                    font-size: @font24;
                    color: @color2;
                }
            }

            dt {
                padding: 0 0.4rem;
                display: none;
            }
        }
    }
</style>